<template>
	<!-- <navbar title="我的"></navbar> -->


	<view class="" style="position: absolute;top: 0;width: 100%;z-index: -1;">

		<image src="../../static/image/bg.png" style="width: 100%;height: 100vh;" mode=""></image>
	</view>
	<view class="navbar_s">我的</view>
	<view class="" v-if="loginFlag" style="margin-top: 75rpx;padding-left: 47rpx;display: flex;" @tap="edit">
		<view class="" style="">
			<image :src="Info.avatar" style="width: 130rpx;height: 130rpx;border-radius: 50%;" mode="aspectFill">
			</image>
		</view>
		<view class="" style="margin-left: 46rpx;">
			<view class="" style="font-size: 36rpx;font-weight: bold;line-height: 1.5;">
				{{Info.nick_name}}
			</view>
			<view class=""
				style="border-radius: 56rpx;background-color: #405EEC;display: flex;justify-content: center;align-items: center;color: white;margin-top: 10rpx;padding: 5rpx 0rpx;font-size: 24rpx;width: 170rpx;">
				{{Info.mobile}}
			</view>
		</view>
	</view>
	<view class="" v-else style="margin-top: 48rpx;padding-left: 50rpx;display: flex;align-items: center;">
		<view class="" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;">
			<image :src="Info.avatar" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;" mode="aspectFill">
			</image>
		</view>
		<view class="" style="margin-left: 50rpx;font-size: 32rpx;font-weight: bold;">
			<view class="" v-if="!info.show" @click="getUserInfo">
				授权登录
			</view>
			 
		</view>
	</view>
	<view class=""
		style="width: 100%;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;padding: 40rpx 0;background-color: white;margin-top: 125rpx;height: calc(100vh - 570rpx);">
		<view class=""
			style="display: flex;align-items: center;justify-content: space-between;padding:0 30rpx 30rpx 30rpx;border-bottom: 1rpx solid #F9F9F9;margin-bottom: 30rpx;"
			@tap="myorder">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/image/1.png" style="width: 52rpx;height: 52rpx;" mode="aspectFill"></image>
				<view class="" style="margin-left: 20rpx;">
					我的订单
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<button open-type="contact">
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;padding:0 30rpx 30rpx 30rpx;border-bottom: 1rpx solid #F9F9F9;margin-bottom: 30rpx;">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/image/2.png" style="width: 52rpx;height: 52rpx;" mode="aspectFill"></image>
					<view class="" style="margin-left: 20rpx;">
						联系客服
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</button>

		<view class=""
			style="display: flex;align-items: center;justify-content: space-between;padding:0 30rpx 30rpx 30rpx;"
			@tap="problem">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/image/3.png" style="width: 52rpx;height: 52rpx;" mode="aspectFill"></image>
				<view class="" style="margin-left: 20rpx;">
					常见问题
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="" v-if="Info.rank" style="width: 100%;height: 16rpx;background-color: #F9F9F9;margin-bottom: 30rpx;">

		</view>
		<view class="" v-if="Info.rank"
			style="display: flex;align-items: center;justify-content: space-between;padding:0 30rpx 30rpx 30rpx;border-bottom: 1rpx solid #F9F9F9;margin-bottom: 30rpx;"
			@tap="orderCenter">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/image/4.png" style="width: 48rpx;height: 48rpx;" mode="aspectFill"></image>
				<view class="" style="margin-left: 20rpx;">
					订单中心
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="" style="padding:0 30rpx" v-if="loginFlag">
			<view class="" @tap="outLogin"
				style="width: 100%;height: 88rpx;border: 1rpx solid #405EEC;border-radius: 100rpx;display: flex;justify-content: center;align-items: center;color: #405EEC;margin-top: 400rpx;">
				退出登录
			</view>
		</view>

	</view>
	<tabbar :current="1"></tabbar>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'

	import { onLoad, onShow } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import tabbar from '@/common/tabbar/index.vue'
	import { userInfo,getSmallMobile,getLogin,getXcxReg } from '@/service/api/index'
	const Info = ref({}) as any
	const loginFlag = ref(false);
	const info = reactive({
	  show: false,
	  params: {},
	  userInfo: {}
	})
	onShow(() => {
		getData()
	})

	const getData = async () => {
		const res = await userInfo("");
		if (res.code == 1) {
			loginFlag.value = true
			Info.value = res.msg;
		} else {
			loginFlag.value = false
		}

	}
	//退出登录
	const outLogin = ()=>{
		uni.removeStorageSync('token');
		getData()
		Info.value.rank = false;
		tools.showToast('退出登录')
	}
	// 跳转登录页面
	const getUserInfo = () => {
		tools.navTo('/pages/mine/login');
	  
	}
	 
	 
	 
 
	//我的订单
	const myorder = () => {
		tools.navTo('/pagesA/order/myOrder');
	}
	//订单中心
	const orderCenter = () => {
		tools.navTo('/pagesA/order/order');
	}
	//修改信息
	const edit = () => {
		tools.navTo('/pagesA/profile/edit?avatar=' + Info.value.avatar + '&name=' + Info.value.nick_name)
	}
	//常见问题
	const problem = () => {
		tools.navTo('/pagesA/problem/problem')
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		background: rgba(244, 244, 248);
	}

	.navbar_s {
		text-align: center;
		height: 172rpx;
		padding-top: 104rpx;
		//background: #354678;
		font-weight: bold;
		font-size: 36rpx;

	}

	.header {
		width: 100%;
		padding: 24rpx 40rpx 56rpx 40rpx;
		background: linear-gradient(180deg, #354678 0%, #5062A7 100%);

		.left {
			align-items: center;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 4rpx solid white;
			}

			text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;
				line-height: 50rpx;
				color: #FFFFFF;
			}
		}

		.right {
			width: 40rpx;
			height: 44rpx;
			position: relative;

			text {
				top: 0;
				right: -20rpx;
				color: #fff;
				width: 38rpx;
				height: 28rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: center;
				position: absolute;
				border-radius: 16rpx;
				background: rgba(230, 66, 94);
			}
		}
	}

	.item {
		margin-top: 20rpx;
		background-color: #fff;
		padding-bottom: 32rpx;
		align-items: center;

		.icon {
			width: 64rpx;
			height: 64rpx;
		}

		text_i {
			width: 128rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.arrow {
			width: 12rpx;
			height: 20rpx;
		}
	}

	.zc {
		width: 100%;
		bottom: 44rpx;
		color: #bbbbbb;
		font-size: 24rpx;
		text-align: center;
		position: absolute;
	}

	.info_c {
		font-size: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -23rpx;
		padding: 3rpx;
		background: rgba(230, 66, 94, 1);
		opacity: 1;
		border-radius: 16rpx;
		color: #ffffff;
	}

	.application {
		background-color: white;

		.application_header {
			align-items: center;
			padding: 30rpx;

			.application_header_text {
				width: 276rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 44rpx;
				color: #000000;
				opacity: 1;
			}

			.allApplication {
				display: flex;

				.text {
					width: 116rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 24rpx;
					color: #666666;
					opacity: 1;
				}

				image {
					height: 23rpx;
					width: 12rpx;
				}
			}
		}
	}

	.mine_serve {
		margin-top: 18rpx;
		background-color: white;

		.mine_serve_header {
			align-items: center;
			padding: 30rpx;

			.mine_serve_header_text {
				width: 276rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 44rpx;
				color: #000000;
				opacity: 1;
			}
		}
	}

	:deep(button) {
		font-size: 28rpx !important;
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
		line-height: 1 !important;
	}
</style>